<template>
    <el-main>
        <el-form :model="listQuery" ref="form" label-width="80px" :inline="true" size="small">
            <el-form-item label="">
                <el-input placeholder="请输入角色名称" v-model="listQuery.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button :icon="Search" @click="searchBtn">搜索</el-button>
                <el-button :icon="Refresh" style="color: #f67670;" @click="resetBtn">重置</el-button>
                <el-button type="primary" :icon="Plus" @click="addBtn">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData.list" border stripe :height="tableHeight">
            <el-table-column prop="name" label="角色名称" />
            <el-table-column prop="remark" label="角色备注" />
            <el-table-column fixed="right" label="操作" align="center" width="270">
                <template #default="scope">
                    <el-button size="small" type="primary" :icon="Edit" @click="editBtn(scope.row, '测试传参')">编辑</el-button>
                    <el-button size="small" type="primary" :icon="Setting" @click="assignBtn(scope.row.id, scope.row.name)">分配权限</el-button>
                    <el-button size="small" type="danger" :icon="Delete" @click="deleteBtn(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
         <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page.sync="listQuery.currentPage"
            :page-sizes="[10, 20, 40, 80, 100]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listQuery.total" background>
        >
        </el-pagination>
    </el-main>
    <!-- 新增，编辑弹框 -->
    <add-role ref="addRef" @save="save"></add-role>
    <!-- 分配权限弹框 -->
    <assignMenu ref="assignRef"></assignMenu>
</template>
<script setup lang='ts'>
import { ref,reactive, onMounted, nextTick } from 'vue'
import tableList from '@/composables/role/tableList';
import tableCurd from '@/composables/role/tableCurd'
import { Plus, Search, Refresh, Edit, Delete, Setting } from '@element-plus/icons-vue'
import addRole from './addRole.vue'
import assignMenu from './assignMenu.vue';

// 表格的高度
const tableHeight = ref(0)

const { tableData, listQuery, getRoleList, sizeChange, currentChange, resetBtn} = tableList()

const { searchBtn, addBtn, editBtn, deleteBtn, assignBtn, addRef, assignRef, save } = tableCurd(getRoleList)

onMounted(() => {
    nextTick(() => {
        tableHeight.value = window.innerHeight - 200
    })
})
</script>
<style scoped lang='scss'>
</style>